import React, {Component} from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {inject, observer} from "mobx-react";
import asyncComponent from "../../utils/AsyncComponent";
import ModalDialog from "../../components/ModalDialog";
import Loading from "../../components/Loading";
import connectRoute from "../../utils/connectRoute";

const AsynHome = connectRoute(asyncComponent(() => import("../Home")));
const AsynStudentVerify = connectRoute(asyncComponent(() => import("../StudentVerify")));
const AsynActivity = connectRoute(asyncComponent(() => import("../Activity")));
const AsynViewActivity = connectRoute(asyncComponent(() => import("../Activity/ViewActivity")));
const AsynLaunchActivity = connectRoute(asyncComponent(() => import("../Activity/LaunchActivity")));
const AsynActivityDetail = connectRoute(asyncComponent(() => import("../Activity/ActivityDetail")));
const AsynRecommendateAlumnu = connectRoute(asyncComponent(() => import("../RecommendateAlumnu")));
const AsynQueryAlumnu = connectRoute(asyncComponent(() => import("../QueryAlumnu")));
const AsynAccurateQuery = connectRoute(asyncComponent(() => import("../QueryAlumnu/AccurateQuery")));
const AsynPositionQuery = connectRoute(asyncComponent(() => import("../QueryAlumnu/PositionQuery")));


@inject("appStore")
@observer
class App extends Component {
    renderDevTool() {
        if (process.env.NODE_ENV !== "production") {
            const DevTools = require("mobx-react-devtools").default;
            return <DevTools/>;
        }
    }

    render() {
        const {error, isLoading, removeError} = this.props.appStore;
        const errorDialog = error && (
            <ModalDialog onClose={removeError}>{error.message || error}</ModalDialog>
        );
        return (
            <div>
                <Router>
                    <Switch>
                        <Route exact path="/" component={AsynHome}/>
                        <Route path="/studentVerify" component={AsynStudentVerify}/>
                        <Route path="/activity" component={AsynActivity}/>
                        <Route exact path="/viewActivity" component={AsynViewActivity}/>
                        <Route path={`/viewActivity/:id`} render={props => <AsynActivityDetail {...props} />}/>
                        <Route path="/launchActivity" component={AsynLaunchActivity}/>
                        <Route path="/recommendateAlumnu" component={AsynRecommendateAlumnu}/>
                        <Route exact path="/queryAlumnu" component={AsynQueryAlumnu}/>
                        <Route path="/queryAlumnu/AccurateQuery" component={AsynAccurateQuery}/>
                        <Route path="/queryAlumnu/PositionQuery" component={AsynPositionQuery}/>
                    </Switch>
                </Router>
                {errorDialog}
                {isLoading && <Loading/>}
                {/* 添加MobX调试组件 */}
                {this.renderDevTool()}
            </div>
        );
    }
}

export default App;
